<template>
	<view class="red-packet-container">
		<view class="header">
			<text class="title">我的红包</text>
			<text class="subtitle">共{{ packetList.length }}个红包</text>
		</view>

		<scroll-view scroll-y class="packet-list">
			<view v-for="(item, index) in packetList" :key="item.id" class="packet-item"
				:class="{ 'expanded': item.expanded }">
				<view class="packet-left">
					<text class="amount">¥{{ item.amount }}</text>
					<text class="condition" v-if="!item.expanded">无门槛</text>
					<text class="condition" v-else>满{{ item.condition }}元可用</text>
					<text class="expire">有效期至{{ formatDate(item.expireTime) }}</text>
				</view>
				<view class="packet-right">
					<button class="expand-btn" @click="expandPacket(item, index)" v-if="!item.expanded">
						膨胀
					</button>
					<text class="expanded-text" v-else>已膨胀</text>
					<view class="tag" v-if="item.canUse">可使用</view>
					<view class="tag used" v-else-if="item.used">已使用</view>
					<view class="tag expired" v-else-if="item.expired">已过期</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>
<script>
	import redPacketApi from '@/api/redpacket'
	import dayjs from 'dayjs'

	export default {
		data() {
			return {
				canExplode: true,
				exploding: false,
				historyList: [],
				todayPacket: null
			}
		},
		mounted() {
			this.checkTodayPacket()
			this.loadHistory()
		},
		methods: {
			async checkTodayPacket() {
				try {
					const res = await redPacketApi.checkTodayRedPacket()
					this.canExplode = !res.data.hasReceived
					this.todayPacket = res.data.packet || null

					if (this.todayPacket) {
						this.historyList.unshift(this.todayPacket)
					}
				} catch (e) {
					console.error(e)
				}
			},

			async loadHistory() {
				try {
					const res = await redPacketApi.getTodayRedPacketHistory()
					this.historyList = res.data
				} catch (e) {
					console.error(e)
				}
			},

			async handleExplode() {
				if (!this.canExplode || this.exploding) return

				this.exploding = true

				try {
					const res = await redPacketApi.explodeRedPacket()

					uni.showToast({
						title: `恭喜获得${res.data.amount}元红包!`,
						icon: 'none',
						duration: 2000
					})

					this.canExplode = false
					this.todayPacket = res.data
					this.historyList.unshift(res.data)
				} catch (e) {
					uni.showToast({
						title: e.message || '爆红包失败',
						icon: 'none'
					})
				} finally {
					this.exploding = false
				}
			},

			formatTime(time) {
				return dayjs(time).format('HH:mm:ss')
			}
		}
	}
</script>


<style scoped>
	.red-packet-container {
		padding: 20rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.header {
		padding: 30rpx 20rpx;
		background-color: #fff;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		display: block;
		margin-bottom: 10rpx;
	}

	.subtitle {
		font-size: 26rpx;
		color: #999;
	}

	.packet-list {
		height: calc(100vh - 180rpx);
	}

	.packet-item {
		display: flex;
		background: linear-gradient(to right, #ff4e4e, #ff8e8e);
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		color: #fff;
		position: relative;
		overflow: hidden;
	}

	.packet-item::before {
		content: "";
		position: absolute;
		left: 0;
		top: 50%;
		width: 10rpx;
		height: 60rpx;
		background-color: #fff;
		transform: translateY(-50%);
		border-radius: 0 10rpx 10rpx 0;
	}

	.packet-left {
		flex: 1;
	}

	.amount {
		font-size: 48rpx;
		font-weight: bold;
		display: block;
		margin-bottom: 10rpx;
	}

	.condition {
		font-size: 28rpx;
		display: block;
		margin-bottom: 10rpx;
	}

	.expire {
		font-size: 24rpx;
		opacity: 0.8;
	}

	.packet-right {
		width: 180rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.expand-btn {
		background-color: #fff;
		color: #ff4e4e;
		border-radius: 40rpx;
		width: 120rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		font-size: 28rpx;
		font-weight: bold;
		border: none;
		outline: none;
		margin-bottom: 10rpx;
	}

	.expand-btn::after {
		border: none;
	}

	.expanded-text {
		font-size: 28rpx;
		margin-bottom: 10rpx;
		font-weight: bold;
	}

	.tag {
		background-color: rgba(255, 255, 255, 0.3);
		padding: 4rpx 12rpx;
		border-radius: 20rpx;
		font-size: 22rpx;
	}

	.tag.used {
		background-color: rgba(0, 0, 0, 0.2);
	}

	.tag.expired {
		background-color: rgba(0, 0, 0, 0.2);
		text-decoration: line-through;
	}

	.packet-item.expanded {
		background: linear-gradient(to right, #ff8e4e, #ffb84e);
	}
</style>